<template>
    <div class="box">
        <header>联习</header>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <section class="question-classify">
                <div v-for="(item,index) in classify" :key="index" @click="toPage(item.path)">
                <div>
                    <img :src="item.img" />
                </div>
                <p>{{item.title}}</p>
                </div>
            </section>
            <section class="sim-list">
                <h1>近期模考</h1>
                <div class="sort">
                <span class="default" :class="{'active':sort==''}" @click="changeSort('')">默认排序</span>
                <span :class="{'active':sort!=''}" @click="changeSort(sort=='desc'?'asc':'desc')">
                    <span style="margin-right:10px;">时间</span>
                    <img src="@/assets/images/up@2x.png" v-if="sort=='asc'" />
                    <img src="@/assets/images/down@2x.png" v-else-if="sort=='desc'" />
                </span>
                <div style="clear:both;"></div>
                </div>
                <List ref="list" url="/api/app/exam/testIndex" method="get"
                :params="{sort:sort}"
                :onGetdata="onGetdata"
                :showText="list.length>0"
                >
                <template slot="item">
                    <div class="list" v-if="list.length>0">
                    <ExamSimulationItem v-for="(item,index) in list" :key="index" :item="item"></ExamSimulationItem>
                    </div>
                    <div class="empty" v-else>
                    <img src="@/assets/images/empty@2x.png" />
                    <div>暂无模考安排，敬请期待</div>
                    </div>
                </template>
                </List>
            </section>
        </van-pull-refresh>
    </div>
</template>
<script>
import ExamSimulationItem from "@/components/ExamSimulationItem.vue";
import List from "@/components/List.vue";
// import { getClassify } from "@/request/api.js";
   export default {
        name:'practise',
        components: {
            List,ExamSimulationItem
        },
        data() {
            return {
                isLoading: false,
                classify: [
                    {
                    img: require("@/assets/images/exam-point.png"),
                    title: "考点专练",
                    path: "Point"
                    },
                    {
                    img: require("@/assets/images/paper-package.png"),
                    title: "套卷练习",
                    path: "PaperPackage"
                    },
                    {
                    img: require("@/assets/images/exam.png"),
                    title: "仿真模考",
                    path: "Exam"
                    },
                    {
                    img: require("@/assets/images/wrong-test.png"),
                    title: "错题练习",
                    path: "ErrorQues"
                    },
                    {
                    img: require("@/assets/images/assess.png"),
                    title: "测评记录",
                    path: "Assess"
                    },
                    {
                    img: require("@/assets/images/question-collocet.png"),
                    title: "习题收藏",
                    path: "QuesCollect"
                    }
                ],
                sort: "",
                list: []
            };
        },
        methods: {
            onRefresh() {
            this.$refs.list.reset();
            this.isLoading = false;
            },
            toPage(name) {
            this.$router.push({
                name
            });
            },
            onGetdata(list) {
            list.forEach(e => {
                if (e.is_start == 0) {
                e.start_status = 2;
                } else if (e.is_start == 1) {
                e.start_status = 1;
                } else if (e.is_start == 2) {
                e.start_status = 3;
                }
                e.have_done_count = e.answer_amount || 0;
            });
            this.list = list;
            },
            changeSort(sort) {
            this.sort = sort;
            this.$refs.list.reset();
            }
        },
        created() {
            if (this.$store.state.app) {
                this.$pub.appAction("homeTabVisibleChange", { visible: 1 });
            }
        },
        destroyed() {
            if (this.$store.state.app) {
                this.$pub.appAction("homeTabVisibleChange", { visible: 0 });
            }
        }
    };
</script>
<style scoped>
.box{
    width: 100%;
    height: 100%;
    background: #F0F2F5;
}
header{
    width: 100%;
    text-align: center;
    padding: .3rem 0;
    font-size: 18px;
    background: white;
    border-bottom: 1px solid #F0F2F5;
}
.question-classify{
    display: flex;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
}
.question-classify>div{
    width: 25%;
}
.question-classify>div>div{
    margin: 0 auto;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 24px 0px rgba(10, 0, 24, 0.07);
    border-radius: 20px;
}
.question-classify>div>div img{
    height: 20px;
    width: 20px;
    margin-left: 25%;
    margin-top: 20%;
}
.question-classify p{
    font-size: 14px;
    font-family: PingFang SC;
    color: rgba(89, 89, 89, 1);
    text-align: center;
}


.sim-list{
    background-color: white;
    padding: 0 10px;
    color: #8c8c8c;
}
.sim-list h3 {
    font-size: 16px;
}

.sort{
    font-size: 15px;
    margin-bottom: 15px;
}
.sort>span:nth-child(1){
    color: #EF7E2F;
}
.sort>span:nth-child(2){
    float: right;
}
.empty{
    text-align: center;
    font-size: 16px;
    color: #8c8c8c;
}
.empty img {
    width: 110px;
    /* margin-bottom: 30px; */
}
  
</style>